
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>YUI Library Examples: Dial: Dial With a Surrounding Image</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    	<link rel="stylesheet" type="text/css" href="../../assets/yui.css" >

<style>
    /*Supplemental CSS for the YUI distribution*/
    #custom-doc { width: 95%; min-width: 950px; }
    #pagetitle {background-image: url(../../assets/bg_hd.gif);}
/*    #pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}*/
</style>

<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-min.js"></script>
<style>
.yui3-dial{
	margin:0 0 20px 20px;
}
.yui3-skin-sam .yui3-dial-content .yui3-dial-ring{
	box-shadow: none;
	-moz-border-radius: none;
	-webkit-border-radius: none;
	-moz-box-shadow: none;
	background:none;
}
.yui3-skin-sam .yui3-dial-content .yui3-dial-center-button {
	box-shadow: none;
	-moz-border-radius: none;
	-webkit-border-radius: none;
	-moz-box-shadow: none;
	background:none;
}
.yui3-skin-sam .yui3-dial-ring-vml v\:oval {
	visibility:hidden;
}
.yui3-skin-sam .yui3-dial-ring-vml .yui3-dial-marker v\:oval,
.yui3-skin-sam .yui3-dial-ring-vml .yui3-dial-handle v\:oval {
	visibility:visible;
}
.yui3-skin-sam .yui3-dial-content .yui3-dial-center-button-vml,
.yui3-skin-sam .yui3-dial-content .yui3-dial-ring-vml{
	background:url(assets/images/empty.png);
}
</style>

</head>
<body id="yahoo-com" class="yui3-skin-sam  yui-skin-sam">
<div id="custom-doc" class="yui-t2">
<div id="hd">
	<div id="ygunav">
		<p>
            <em>
                <a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i>	
            </em>
		</p>
		<form action="http://search.yahoo.com/search" id="sitesearchform">
            <input name="vs" type="hidden" value="developer.yahoo.com">
            <input name="vs" type="hidden" value="yuiblog.com">
			<input name="vs" type="hidden" value="yuilibrary.com">
		    <div id="sitesearch">
		    	<label for="searchinput">Site Search (YDN, YUILibrary &amp; YUIBlog): </label>
			    <input type="text" id="searchinput" name="p">
			    <input type="submit" value="Search" id="searchsubmit" class="ygbt">
		    </div>
		</form>
    </div>
	<div id="ygma"><a href="../../"><img src="../../assets/logo.gif"  border="0" width="200" height="93"></a></div>
	<div id="pagetitle"><h1>YUI Library Examples: Dial: Dial With a Surrounding Image</h1></div>
</div>
<div id="bd">


	<div id="yui-main">
		<div class="yui-b">
		  <div class="yui-ge">
			  <div class="yui-u first example" id="main">

	<h2>Dial: Dial With a Surrounding Image</h2>

	<div id="example" class="promo">
	<div class="example-intro">
	<p>This example shows how to create a <code>Dial</code> widget using an image 
that surrounds (or is larger than) the Dial.</p>	</div>

	<div class="module example-container ">
			<div class="hd exampleHd">
			<p class="newWindowButton yui-skin-sam">
                <a href="dial-image-surrounding_clean.html" target="_blank">View example in new window.</a>
            </p>
		</div>		<div id="example-canvas" class="bd">

	
	<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

	<div id="demo"></div>

<script type="text/javascript">
YUI({ filter: 'raw' }).use("dial", function(Y) {

	var dial = new Y.Dial({
		min: -90,
		max: 90,
		stepsPerRev: 200,
		value: 0,
		diameter: 100
	});
	dial.render('#demo');
	
	dial._setLabelString('Climate:');
	dial._setTooltipString('Drag for cool or heat.');
	dial._setResetString('Off');
	var im = Y.Node.create('<img src="assets/images/cold_hot.png"/>');
	im.setStyles({'position':'absolute', 'top':'-3px', 'left':'-9px'});
	Y.one('.yui3-dial-north-mark').insert(im, 'before');
	
});
</script>

	<!--END SOURCE CODE FOR EXAMPLE =============================== -->

	
		</div>
	</div>
	</div>

	<h3>Creating a Dial and Surrounding It With a Larger Image</h3>

<p>Some cases may require a <code>Dial</code> that has an image surrounding it such as tick marks, units, or other
visual enhancements. These images can be larger than the ring of the dial and therefore may not fit as a background image.
To provide for this use case, an extra image object will need to be added to the DOM.</p>

<p>
In this example we'll simulate the climate control on an car dashboard.
The image we'll add contains two curved wedges of color, blue and red, that wrap around the dial,
signifying the temperature of air conditioning or heat.
</p>

<h4>The Markup</h4>

<p>The only markup requirement is a div to contain the <code>Dial</code>.</p>

<div id="syntax-cf0d80e459e71f73c62900b3bcd09cf7" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="sy0">&lt;</span>div id<span class="sy0">=</span><span class="st0">&quot;demo&quot;</span><span class="sy0">&gt;&lt;/</span>div<span class="sy0">&gt;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="sy0">&lt;</span>div id<span class="sy0">=</span><span class="st0">&quot;demo&quot;</span><span class="sy0">&gt;&lt;/</span>div<span class="sy0">&gt;</span></pre></div><textarea id="syntax-cf0d80e459e71f73c62900b3bcd09cf7-plain"><div id="demo"></div></textarea></div>
<h4>The JavaScript</h4>

<p>The same JavaScript can be used as in the basic Dial example, with a bit of
extra code to add the image object.</p>

<p>Some commonly used configuration attributes are shown below. 
This example also shows how to modify the visible UI strings after the <code>Dial</code> renders.</p>
<div id="syntax-300ce830373716ff278647d0a2287184" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">YUI<span class="br0">&#40;</span><span class="br0">&#123;</span> filter<span class="sy0">:</span> <span class="st0">'raw'</span> <span class="br0">&#125;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">&quot;dial&quot;</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">	<span class="kw2">var</span> dial <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Dial</span><span class="br0">&#40;</span><span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">		min<span class="sy0">:</span> <span class="sy0">-</span><span class="nu0">90</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">		max<span class="sy0">:</span> <span class="nu0">90</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">		stepsPerRev<span class="sy0">:</span> <span class="nu0">200</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">		value<span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">		diameter<span class="sy0">:</span> <span class="nu0">100</span></div></li><li class="li1"><div class="de1">	<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">	dial.<span class="me1">render</span><span class="br0">&#40;</span><span class="st0">&quot;#demo&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">	<span class="co1">//Setting visible strings after Dial renders.</span></div></li><li class="li1"><div class="de1">	<span class="co1">//See other example for setting strings before rendering the Dial.</span></div></li><li class="li1"><div class="de1">	dial._setLabelString<span class="br0">&#40;</span><span class="st0">'Climate:'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">	dial._setTooltipString<span class="br0">&#40;</span><span class="st0">'Drag for cool or heat.'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">	dial._setResetString<span class="br0">&#40;</span><span class="st0">'Off'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">YUI<span class="br0">&#40;</span><span class="br0">&#123;</span> filter<span class="sy0">:</span> <span class="st0">'raw'</span> <span class="br0">&#125;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">&quot;dial&quot;</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span>
&nbsp;
	<span class="kw2">var</span> dial <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Dial</span><span class="br0">&#40;</span><span class="br0">&#123;</span>
		min<span class="sy0">:</span> <span class="sy0">-</span><span class="nu0">90</span><span class="sy0">,</span>
		max<span class="sy0">:</span> <span class="nu0">90</span><span class="sy0">,</span>
		stepsPerRev<span class="sy0">:</span> <span class="nu0">200</span><span class="sy0">,</span>
		value<span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">,</span>
		diameter<span class="sy0">:</span> <span class="nu0">100</span>
	<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
	dial.<span class="me1">render</span><span class="br0">&#40;</span><span class="st0">&quot;#demo&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
	<span class="co1">//Setting visible strings after Dial renders.</span>
	<span class="co1">//See other example for setting strings before rendering the Dial.</span>
	dial._setLabelString<span class="br0">&#40;</span><span class="st0">'Climate:'</span><span class="br0">&#41;</span><span class="sy0">;</span>
	dial._setTooltipString<span class="br0">&#40;</span><span class="st0">'Drag for cool or heat.'</span><span class="br0">&#41;</span><span class="sy0">;</span>
	dial._setResetString<span class="br0">&#40;</span><span class="st0">'Off'</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-300ce830373716ff278647d0a2287184-plain">YUI({ filter: 'raw' }).use("dial", function(Y) {

	var dial = new Y.Dial({
		min: -90,
		max: 90,
		stepsPerRev: 200,
		value: 0,
		diameter: 100
	});
	dial.render("#demo");

	//Setting visible strings after Dial renders.
	//See other example for setting strings before rendering the Dial.
	dial._setLabelString('Climate:');
	dial._setTooltipString('Drag for cool or heat.');
	dial._setResetString('Off');

});</textarea></div>

<h4>Inserting the Image</h4>
<p>After rendering the <code>Dial</code>, we create and insert the image object.</p>
<div id="syntax-d7d5be236fc12d9c4c5d5c52ff67b3bd" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="co1">//Create an image node.</span></div></li><li class="li1"><div class="de1"><span class="kw2">var</span> im <span class="sy0">=</span> Y.<span class="me1">Node</span>.<span class="me1">create</span><span class="br0">&#40;</span><span class="st0">'&lt;img src=&quot;assets/images/cold_hot.png&quot;/&gt;'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1"><span class="co1">//Position it absolutely to the correct spot depending on it's size.</span></div></li><li class="li2"><div class="de2">im.<span class="me1">setStyles</span><span class="br0">&#40;</span><span class="br0">&#123;</span><span class="st0">'position'</span><span class="sy0">:</span><span class="st0">'absolute'</span><span class="sy0">,</span> <span class="st0">'top'</span><span class="sy0">:</span><span class="st0">'-3px'</span><span class="sy0">,</span> <span class="st0">'left'</span><span class="sy0">:</span><span class="st0">'-9px'</span><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1"><span class="co1">//Insert it in the DOM.</span></div></li><li class="li1"><div class="de1"><span class="co1">//The north-mark is the first object inside the ring.</span></div></li><li class="li1"><div class="de1"><span class="co1">//depending on the image, you may need to insert it before the yui3-dial-label </span></div></li><li class="li2"><div class="de2">Y.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'.yui3-dial-north-mark'</span><span class="br0">&#41;</span>.<span class="me1">insert</span><span class="br0">&#40;</span>im<span class="sy0">,</span> <span class="st0">'before'</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="co1">//Create an image node.</span>
<span class="kw2">var</span> im <span class="sy0">=</span> Y.<span class="me1">Node</span>.<span class="me1">create</span><span class="br0">&#40;</span><span class="st0">'&lt;img src=&quot;assets/images/cold_hot.png&quot;/&gt;'</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
<span class="co1">//Position it absolutely to the correct spot depending on it's size.</span>
im.<span class="me1">setStyles</span><span class="br0">&#40;</span><span class="br0">&#123;</span><span class="st0">'position'</span><span class="sy0">:</span><span class="st0">'absolute'</span><span class="sy0">,</span> <span class="st0">'top'</span><span class="sy0">:</span><span class="st0">'-3px'</span><span class="sy0">,</span> <span class="st0">'left'</span><span class="sy0">:</span><span class="st0">'-9px'</span><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
<span class="co1">//Insert it in the DOM.</span>
<span class="co1">//The north-mark is the first object inside the ring.</span>
<span class="co1">//depending on the image, you may need to insert it before the yui3-dial-label </span>
Y.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">'.yui3-dial-north-mark'</span><span class="br0">&#41;</span>.<span class="me1">insert</span><span class="br0">&#40;</span>im<span class="sy0">,</span> <span class="st0">'before'</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-d7d5be236fc12d9c4c5d5c52ff67b3bd-plain">//Create an image node.
var im = Y.Node.create('<img src="assets/images/cold_hot.png"/>');
	
//Position it absolutely to the correct spot depending on it's size.
im.setStyles({'position':'absolute', 'top':'-3px', 'left':'-9px'});
	
//Insert it in the DOM.
//The north-mark is the first object inside the ring.
//depending on the image, you may need to insert it before the yui3-dial-label 
Y.one('.yui3-dial-north-mark').insert(im, 'before');</textarea></div>
<h4>The CSS</h4>

<p> 
Here, we are just cleaning out the visible styles of the ring and the center button.
This is optional.
</p>
<div id="syntax-61a84ad1c37e07980457416010ec2be8" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="coMULTI">/* Adding some margin for the image */</span></div></li><li class="li1"><div class="de1">.<span class="me1">yui3</span><span class="sy0">-</span>dial<span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">	margin<span class="sy0">:</span><span class="nu0">0</span> <span class="nu0">0</span> 20px 20px<span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span></div></li><li class="li2"><div class="de2"><span class="co2">/* Remove visible styles of the ring */</span></div></li><li class="li1"><div class="de1">.<span class="me1">yui3</span><span class="sy0">-</span>skin<span class="sy0">-</span>sam .<span class="me1">yui3</span><span class="sy0">-</span>dial<span class="sy0">-</span>content .<span class="me1">yui3</span><span class="sy0">-</span>dial<span class="sy0">-</span>ring<span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">	box<span class="sy0">-</span>shadow<span class="sy0">:</span> none<span class="sy0">;</span></div></li><li class="li1"><div class="de1">	<span class="sy0">-</span>moz<span class="sy0">-</span>border<span class="sy0">-</span>radius<span class="sy0">:</span> none<span class="sy0">;</span></div></li><li class="li1"><div class="de1">	<span class="sy0">-</span>webkit<span class="sy0">-</span>border<span class="sy0">-</span>radius<span class="sy0">:</span> none<span class="sy0">;</span></div></li><li class="li2"><div class="de2">	<span class="sy0">-</span>moz<span class="sy0">-</span>box<span class="sy0">-</span>shadow<span class="sy0">:</span> none<span class="sy0">;</span></div></li><li class="li1"><div class="de1">	background<span class="sy0">:</span>none<span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span></div></li><li class="li1"><div class="de1"><span class="co2">/* Remove visible style of the center button */</span></div></li><li class="li1"><div class="de1">.<span class="me1">yui3</span><span class="sy0">-</span>skin<span class="sy0">-</span>sam .<span class="me1">yui3</span><span class="sy0">-</span>dial<span class="sy0">-</span>content .<span class="me1">yui3</span><span class="sy0">-</span>dial<span class="sy0">-</span>center<span class="sy0">-</span>button <span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">	box<span class="sy0">-</span>shadow<span class="sy0">:</span> none<span class="sy0">;</span></div></li><li class="li1"><div class="de1">	<span class="sy0">-</span>moz<span class="sy0">-</span>border<span class="sy0">-</span>radius<span class="sy0">:</span> none<span class="sy0">;</span></div></li><li class="li1"><div class="de1">	<span class="sy0">-</span>webkit<span class="sy0">-</span>border<span class="sy0">-</span>radius<span class="sy0">:</span> none<span class="sy0">;</span></div></li><li class="li1"><div class="de1">	<span class="sy0">-</span>moz<span class="sy0">-</span>box<span class="sy0">-</span>shadow<span class="sy0">:</span> none<span class="sy0">;</span></div></li><li class="li1"><div class="de1">	background<span class="sy0">:</span>none<span class="sy0">;</span></div></li><li class="li2"><div class="de2"><span class="br0">&#125;</span></div></li><li class="li1"><div class="de1"><span class="co2">/* Hide all VML ovals in IE.*/</span></div></li><li class="li1"><div class="de1">.<span class="me1">yui3</span><span class="sy0">-</span>skin<span class="sy0">-</span>sam .<span class="me1">yui3</span><span class="sy0">-</span>dial<span class="sy0">-</span>ring<span class="sy0">-</span>vml v\<span class="sy0">:</span>oval <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">	visibility<span class="sy0">:</span>hidden<span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span></div></li><li class="li2"><div class="de2"><span class="co2">/* Show the marker and the handle ovals */</span></div></li><li class="li1"><div class="de1">.<span class="me1">yui3</span><span class="sy0">-</span>skin<span class="sy0">-</span>sam .<span class="me1">yui3</span><span class="sy0">-</span>dial<span class="sy0">-</span>ring<span class="sy0">-</span>vml .<span class="me1">yui3</span><span class="sy0">-</span>dial<span class="sy0">-</span>marker v\<span class="sy0">:</span>oval<span class="sy0">,</span></div></li><li class="li1"><div class="de1">.<span class="me1">yui3</span><span class="sy0">-</span>skin<span class="sy0">-</span>sam .<span class="me1">yui3</span><span class="sy0">-</span>dial<span class="sy0">-</span>ring<span class="sy0">-</span>vml .<span class="me1">yui3</span><span class="sy0">-</span>dial<span class="sy0">-</span>handle v\<span class="sy0">:</span>oval <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">	visibility<span class="sy0">:</span>visible<span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span></div></li><li class="li2"><div class="de2"><span class="co2">/* Fill center button and ring so their backgrounds accept events in IE */</span></div></li><li class="li1"><div class="de1">.<span class="me1">yui3</span><span class="sy0">-</span>skin<span class="sy0">-</span>sam .<span class="me1">yui3</span><span class="sy0">-</span>dial<span class="sy0">-</span>content .<span class="me1">yui3</span><span class="sy0">-</span>dial<span class="sy0">-</span>center<span class="sy0">-</span>button<span class="sy0">-</span>vml<span class="sy0">,</span></div></li><li class="li1"><div class="de1">.<span class="me1">yui3</span><span class="sy0">-</span>skin<span class="sy0">-</span>sam .<span class="me1">yui3</span><span class="sy0">-</span>dial<span class="sy0">-</span>content .<span class="me1">yui3</span><span class="sy0">-</span>dial<span class="sy0">-</span>ring<span class="sy0">-</span>vml<span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">	background<span class="sy0">:</span>url<span class="br0">&#40;</span>assets<span class="sy0">/</span>images<span class="sy0">/</span>empty.<span class="me1">png</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="coMULTI">/* Adding some margin for the image */</span>
.<span class="me1">yui3</span><span class="sy0">-</span>dial<span class="br0">&#123;</span>
	margin<span class="sy0">:</span><span class="nu0">0</span> <span class="nu0">0</span> 20px 20px<span class="sy0">;</span>
<span class="br0">&#125;</span>
<span class="co2">/* Remove visible styles of the ring */</span>
.<span class="me1">yui3</span><span class="sy0">-</span>skin<span class="sy0">-</span>sam .<span class="me1">yui3</span><span class="sy0">-</span>dial<span class="sy0">-</span>content .<span class="me1">yui3</span><span class="sy0">-</span>dial<span class="sy0">-</span>ring<span class="br0">&#123;</span>
	box<span class="sy0">-</span>shadow<span class="sy0">:</span> none<span class="sy0">;</span>
	<span class="sy0">-</span>moz<span class="sy0">-</span>border<span class="sy0">-</span>radius<span class="sy0">:</span> none<span class="sy0">;</span>
	<span class="sy0">-</span>webkit<span class="sy0">-</span>border<span class="sy0">-</span>radius<span class="sy0">:</span> none<span class="sy0">;</span>
	<span class="sy0">-</span>moz<span class="sy0">-</span>box<span class="sy0">-</span>shadow<span class="sy0">:</span> none<span class="sy0">;</span>
	background<span class="sy0">:</span>none<span class="sy0">;</span>
<span class="br0">&#125;</span>
<span class="co2">/* Remove visible style of the center button */</span>
.<span class="me1">yui3</span><span class="sy0">-</span>skin<span class="sy0">-</span>sam .<span class="me1">yui3</span><span class="sy0">-</span>dial<span class="sy0">-</span>content .<span class="me1">yui3</span><span class="sy0">-</span>dial<span class="sy0">-</span>center<span class="sy0">-</span>button <span class="br0">&#123;</span>
	box<span class="sy0">-</span>shadow<span class="sy0">:</span> none<span class="sy0">;</span>
	<span class="sy0">-</span>moz<span class="sy0">-</span>border<span class="sy0">-</span>radius<span class="sy0">:</span> none<span class="sy0">;</span>
	<span class="sy0">-</span>webkit<span class="sy0">-</span>border<span class="sy0">-</span>radius<span class="sy0">:</span> none<span class="sy0">;</span>
	<span class="sy0">-</span>moz<span class="sy0">-</span>box<span class="sy0">-</span>shadow<span class="sy0">:</span> none<span class="sy0">;</span>
	background<span class="sy0">:</span>none<span class="sy0">;</span>
<span class="br0">&#125;</span>
<span class="co2">/* Hide all VML ovals in IE.*/</span>
.<span class="me1">yui3</span><span class="sy0">-</span>skin<span class="sy0">-</span>sam .<span class="me1">yui3</span><span class="sy0">-</span>dial<span class="sy0">-</span>ring<span class="sy0">-</span>vml v\<span class="sy0">:</span>oval <span class="br0">&#123;</span>
	visibility<span class="sy0">:</span>hidden<span class="sy0">;</span>
<span class="br0">&#125;</span>
<span class="co2">/* Show the marker and the handle ovals */</span>
.<span class="me1">yui3</span><span class="sy0">-</span>skin<span class="sy0">-</span>sam .<span class="me1">yui3</span><span class="sy0">-</span>dial<span class="sy0">-</span>ring<span class="sy0">-</span>vml .<span class="me1">yui3</span><span class="sy0">-</span>dial<span class="sy0">-</span>marker v\<span class="sy0">:</span>oval<span class="sy0">,</span>
.<span class="me1">yui3</span><span class="sy0">-</span>skin<span class="sy0">-</span>sam .<span class="me1">yui3</span><span class="sy0">-</span>dial<span class="sy0">-</span>ring<span class="sy0">-</span>vml .<span class="me1">yui3</span><span class="sy0">-</span>dial<span class="sy0">-</span>handle v\<span class="sy0">:</span>oval <span class="br0">&#123;</span>
	visibility<span class="sy0">:</span>visible<span class="sy0">;</span>
<span class="br0">&#125;</span>
<span class="co2">/* Fill center button and ring so their backgrounds accept events in IE */</span>
.<span class="me1">yui3</span><span class="sy0">-</span>skin<span class="sy0">-</span>sam .<span class="me1">yui3</span><span class="sy0">-</span>dial<span class="sy0">-</span>content .<span class="me1">yui3</span><span class="sy0">-</span>dial<span class="sy0">-</span>center<span class="sy0">-</span>button<span class="sy0">-</span>vml<span class="sy0">,</span>
.<span class="me1">yui3</span><span class="sy0">-</span>skin<span class="sy0">-</span>sam .<span class="me1">yui3</span><span class="sy0">-</span>dial<span class="sy0">-</span>content .<span class="me1">yui3</span><span class="sy0">-</span>dial<span class="sy0">-</span>ring<span class="sy0">-</span>vml<span class="br0">&#123;</span>
	background<span class="sy0">:</span>url<span class="br0">&#40;</span>assets<span class="sy0">/</span>images<span class="sy0">/</span>empty.<span class="me1">png</span><span class="br0">&#41;</span><span class="sy0">;</span>
<span class="br0">&#125;</span></pre></div><textarea id="syntax-61a84ad1c37e07980457416010ec2be8-plain">/* Adding some margin for the image */
.yui3-dial{
	margin:0 0 20px 20px;
}
/* Remove visible styles of the ring */
.yui3-skin-sam .yui3-dial-content .yui3-dial-ring{
	box-shadow: none;
	-moz-border-radius: none;
	-webkit-border-radius: none;
	-moz-box-shadow: none;
	background:none;
}
/* Remove visible style of the center button */
.yui3-skin-sam .yui3-dial-content .yui3-dial-center-button {
	box-shadow: none;
	-moz-border-radius: none;
	-webkit-border-radius: none;
	-moz-box-shadow: none;
	background:none;
}
/* Hide all VML ovals in IE.*/
.yui3-skin-sam .yui3-dial-ring-vml v\:oval {
	visibility:hidden;
}
/* Show the marker and the handle ovals */
.yui3-skin-sam .yui3-dial-ring-vml .yui3-dial-marker v\:oval,
.yui3-skin-sam .yui3-dial-ring-vml .yui3-dial-handle v\:oval {
	visibility:visible;
}
/* Fill center button and ring so their backgrounds accept events in IE */
.yui3-skin-sam .yui3-dial-content .yui3-dial-center-button-vml,
.yui3-skin-sam .yui3-dial-content .yui3-dial-ring-vml{
	background:url(assets/images/empty.png);
}</textarea></div>				</div>
				<div class="yui-u sidebar">
	
					<div id="examples" class="mod box4">
                        <div class="hd">
						<h4>
    Dial Examples:</h4>
                        </div>
						<div class="bd">
							<ul>
								<li><a href='../dial/dial-basic.html'>Basic Dial</a></li><li><a href='../dial/dial-text-input.html'>Dial Linked With Text Input</a></li><li><a href='../dial/dial-image-background.html'>Dial With Image Background</a></li><li class='selected'><a href='../dial/dial-image-surrounding.html'>Dial With a Surrounding Image</a></li><li><a href='../dial/dial-interactive.html'>Dial With Interactive UI</a></li>							</ul>
						</div>
					</div>

					<div class="mod box4">
                        <div class="hd">
						<h4>More Dial Resources:</h4>
                        </div>
                        <div class="bd">
						<ul>
							<!-- <li><a href="http://developer.yahoo.com/yui/dial/">User's Guide</a> (external)</li> -->
<li><a href="../../api/module_dial.html">API Documentation</a></li></ul>
                        </div>
					</div>
			  </div>
		</div>

		</div>
	</div>


<div class="yui-b toc3" id="tocWrapper">
<!-- TABLE OF CONTENTS -->
<div id="toc">
	
<ul>
<li class="sect first">YUI 3 Resources</li><li class="item"><a title="YUI 3 -- Yahoo! User Interface (YUI) Library" href="http://developer.yahoo.com/yui/3/">YUI 3 Web Site</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">YUI 3 Examples</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../api/">YUI 3 API Docs</a></li><li class="item"><a title="YUI 3 Dependency Configurator -- configure your custom YUI implementation" href="http://developer.yahoo.com/yui/3/configurator/index.html">YUI 3 Dependency Configurator</a></li><li class="item"><a title="The YUI 3 Forum on YUILibrary.com" href="http://yuilibrary.com/forum/viewforum.php?f=15">YUI 3 Forums (external)</a></li><li class="item"><a title="Found a bug or a missing feature? Let us know on YUILibrary.com." href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/license.html">YUI License</a></li><li class="item"><a title="Download and fork the YUI project on GitHub" href="http://github.com/yui">YUI on Github</a></li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUI Blog (external)</a></li><li class="sect">YUI 3 Core - Examples</li><li class="item"><a title="YUI Global Object - Functional Examples" href="../../examples/yui/index.html">YUI Global Object</a></li><li class="item"><a title="Event - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="Node - Functional Examples" href="../../examples/node/index.html">Node</a></li><li class="sect">YUI 3 Component Infrastructure - Examples</li><li class="item"><a title="Attribute - Functional Examples" href="../../examples/attribute/index.html">Attribute</a></li><li class="item"><a title="Plugin - Functional Examples" href="../../examples/plugin/index.html">Plugin</a></li><li class="item"><a title="Widget - Functional Examples" href="../../examples/widget/index.html">Widget</a></li><li class="sect">YUI 3 Utilities - Examples</li><li class="item"><a title="Animation - Functional Examples" href="../../examples/anim/index.html">Animation</a></li><li class="item"><a title="AsyncQueue - Functional Examples" href="../../examples/async-queue/index.html">AsyncQueue</a></li><li class="item"><a title="Cache - Functional Examples" href="../../examples/cache/index.html">Cache</a></li><li class="item"><a title="Cookie - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="DataSchema - Functional Examples" href="../../examples/dataschema/index.html">DataSchema <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataSource - Functional Examples" href="../../examples/datasource/index.html">DataSource <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataType - Functional Examples" href="../../examples/datatype/index.html">DataType <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Drag &amp; Drop - Functional Examples" href="../../examples/dd/index.html">Drag &amp; Drop</a></li><li class="item"><a title="Get - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="History - Functional Examples" href="../../examples/history/index.html">History <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="IO - Functional Examples" href="../../examples/io/index.html">IO</a></li><li class="item"><a title="ImageLoader - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader</a></li><li class="item"><a title="Internationalization - Functional Examples" href="../../examples/intl/index.html">Internationalization</a></li><li class="item"><a title="JSON (JavaScript Object Notation) - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="JSONP (JSON with Padding) - Functional Examples" href="../../examples/jsonp/index.html">JSONP <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Recordset - Functional Examples" href="../../examples/recordset/index.html">Recordset <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Resize - Functional Examples" href="../../examples/resize/index.html">Resize <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Sortable - Functional Examples" href="../../examples/sortable/index.html">Sortable <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Stylesheet - Functional Examples" href="../../examples/stylesheet/index.html">Stylesheet</a></li><li class="item"><a title="Transition - Functional Examples" href="../../examples/transition/index.html">Transition <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Uploader - Functional Examples" href="../../examples/uploader/index.html">Uploader <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="YQL Query - Functional Examples" href="../../examples/yql/index.html">YQL Query <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Widgets - Examples</li><li class="item"><a title="AutoComplete - Functional Examples" href="../../examples/autocomplete/index.html">AutoComplete <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Charts - Functional Examples" href="../../examples/charts/index.html">Charts <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataTable - Functional Examples" href="../../examples/datatable/index.html">DataTable <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="selected "><a title="Dial - Functional Examples" href="../../examples/dial/index.html">Dial <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Editor - Functional Examples" href="../../examples/editor/index.html">Editor <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Overlay - Functional Examples" href="../../examples/overlay/index.html">Overlay <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="ScrollView - Functional Examples" href="../../examples/scrollview/index.html">ScrollView <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Slider - Functional Examples" href="../../examples/slider/index.html">Slider <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="TabView - Functional Examples" href="../../examples/tabview/index.html">TabView <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Node Plugins - Examples</li><li class="item"><a title="FocusManager Node Plugin - Functional Examples" href="../../examples/node-focusmanager/index.html">FocusManager Node Plugin <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="MenuNav Node Plugin - Functional Examples" href="../../examples/node-menunav/index.html">MenuNav Node Plugin <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 CSS - Examples</li><li class="item"><a title="YUI Base - Functional Examples" href="../../examples/cssbase/index.html">CSS Base</a></li><li class="item"><a title="YUI Fonts - Functional Examples" href="../../examples/cssfonts/index.html">CSS Fonts</a></li><li class="item"><a title="YUI Grids - Functional Examples" href="../../examples/cssgrids/index.html">CSS Grids <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="YUI CSS Reset - Functional Examples" href="../../examples/cssreset/index.html">CSS Reset</a></li><li class="sect">YUI 3 Developer Tools - Examples</li><li class="item"><a title="Console - Functional Examples" href="../../examples/console/index.html">Console <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Console Filters Plugin- Functional Examples" href="../../examples/console-filters/index.html">Plugin.ConsoleFilters <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Profiler - Functional Examples" href="../../examples/profiler/index.html">Profiler</a></li><li class="item"><a title="Test - Functional Examples" href="../../examples/test/index.html">Test</a></li><li class="sect">Other Useful YUI 3 Resources</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li></ul>
</div>
</div>
	</div><!--closes bd-->

	<div id="ft">
        <p class="first">Copyright &copy; 2011 Yahoo! Inc. All rights reserved.</p>
        <p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> - 
            <a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> - 
            <a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> - 
            <a href="http://careers.yahoo.com/">Job Openings</a></p>
	</div>
</div>
<script language="javascript"> 
var yuiConfig = { filter: 'raw' };
</script>
<script src="../../assets/syntax.js"></script>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript"> 
dp.SyntaxHighlighter.HighlightAll('code'); 
</script>
</body>
</html>
